/* ============================================================
   公用内容
   ============================================================ */
body {
   background-color: #fbf9fe;
}
.hide {
   display: none !important;
}

/* 弹出层 */
.mask {
   position: fixed;
   background-color: rgba(0, 0, 0, 0.6);
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 999;
}

/* 信息列表 */
.info-list .list {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -moz-box-orient: horizontal;
   -webkit-box-orient: horizontal;
   -o-box-orient: horizontal;
   box-orient: horizontal;
   line-height: 22px;
   width: 100%
}
.info-list .list-title {
   font-size: 12px;
   color: #999;
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   width: 30%;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: block
}
.info-list .list-content {
   font-size: 12px;
   color: #333;
   text-align: right;
   -webkit-box-flex: 1;
   -moz-box-flex: 1;
   width: 70%;
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
   display: block
}

/* 操作提示 */
.tips .icon-area{
   font-size: 78px;
   margin-left: 50%;
   -moz-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   transform: translateX(-50%);
}
.tips .tips-title {
   font-size: 24px;
   text-align: center;
   padding: 20px 0 12px
}
.tips .tips-info {
   font-size: 15px;
   text-align: center
}

/* ============================================================
   页面
   ============================================================ */

/* confirm.html(确认缴费) */
.confirm {
   margin-bottom: 20px
}
.info-area {
   position: relative;
   background-color: #FFF;
   padding: 0 18px
}
.info-area:after {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   bottom: 0;
   height: 1px;
   background-color: #ccc;
   -webkit-transform: scale(1, .5);
   transform: scale(1, .5);
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
.info-area .totle {
   position: relative;
   padding: 25px 0 21px;
   text-align: center
}
.info-area .totle:after {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   bottom: 0;
   height: 1px;
   background-color: #E0E0E0;
   -webkit-transform: scale(1, .5);
   transform: scale(1, .5);
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
.info-area .totle .totle-title {
   font-size: 15px;
   color: #000
}
.info-area .totle .totle-num {
   font-size: 50px;
   padding-top: 7px;
   text-align: center
}
.info-area .totle .totle-num .question-area {
   vertical-align: 5px
}
.confirm .info-list .map-icon {
   background: url() no-repeat;
   width: 11px;
   height: 13px;
   -webkit-background-size: 11px 13px;
   background-size: 11px 13px;
   display: inline-block;
   margin-right: 4px;
   vertical-align: -2px
}
.confirm .info-list .list-content a {
   color: #3295E9
}
.confirm .info-list {
   padding: 20px 0 29px
}
.confirm .weui-btn {
   margin: 19px 0 13px 0
}
.confirm .tips {
   font-size: 14px;
   color: #666;
   text-align: center
}
.info-area .totle .totle-num .overtime-tips {
   font-size: 15px;
   text-align: center
}
.info-area .totle .totle-discount {
   font-size: 15px;
   text-align: center;
   color: #A7A7A7;
   text-decoration: line-through
}
.discount-free-btn, .info-btn {
   margin: 0 10px
}
.show-discount .info-area .totle .totle-discount, .show-discount-free .discount-free-btn, .show-discount-free .info-area .totle .totle-discount, .show-overtime .info-area .totle .totle-num .overtime-tips {
   display: block
}
.discount-free-btn, .info-area .totle .totle-discount, .info-area .totle .totle-num .overtime-tips, .info-list .discount-list, .over-due, .show-discount-free .info-btn {
   display: none
}
.show-discount .discount-list, .show-discount-free .discount-list, .show-overtime .over-due {
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex
}

/* 无需缴费 */
.info-area .totle .totle-free, .info-area .totle .totle-unin {
   font-size: 24px;
   text-align: center;
   padding: 18px 0 5px;
   display: none
}
.info-area .totle .free-tips, .info-area .totle .unin-tips {
   display: block;
   padding-top: 7px;
   font-size: 15px
}
.info-area .totle .green-font {
   color: #22AC38;
   margin: 0 6px
}
.show-free .info-area .totle .totle-free {
   display: block
}
.show-free .btn, .show-free .tips, .show-free .totle-num, .show-free .totle-title {
   display: none
}

/* 此卡未入场 */
.show-unin .info-area .totle .totle-unin {
   display: block;
}
.show-unin .totle-num, .show-unin .totle-title, .show-unin .btn, .show-unin .tips, .show-unin .last-time, .show-unin .in-time {
   display: none;
}

/* 计费方式弹出层 */
.billing-mask {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   align-items: center;
   -webkit-box-pack: center;
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
}
.billing-mask .content {
   background-color: #E7E7E7;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   width: 90%;
   padding-bottom: 14px;
}
.billing-mask .billing-title {
   padding: 18px 0;
   text-align: center;
   font-size: 18px;
   color: #333333;
   font-weight: 600;
}
.billing-mask .billing-list {
   padding: 0 15px;
}
.billing-mask .billing-list .list {
   line-height: 20px;
}
.billing-mask .billing-list .totle-list {
   padding-top: 8px;
   position: relative
}
.billing-mask .billing-list .totle-list:before {
   content: "";
   width: 100%;
   display: block;
   border-top: 1px solid #CECECE;
   position: absolute;
   left: 0;
   top: 4px;
}
.billing-mask .billing-list .green-font {
   color: #22AC38;
}
.billing-mask .rules {
   padding: 0 15px;
}
.billing-mask .rules .rules-title {
   font-size: 12px;
   color: #666666;
   padding: 45px 0 12px;
   font-weight: 600;
}
.billing-mask .rules .rules-main {
   font-size: 10px;
   color: #999999;
   line-height: 20px;
}
.billing-mask .close-btn {
   margin: 30px 15px 0;
}

/* 输入车牌号 */
.lpn-form .form-line .label {
   min-width: 84px
}
.input-area {
   margin-top: 20px
}
.lpn-form .lpn-element {
   position: relative
}
.lpn-form .lpn-element .select {
   float: left;
   width: 50px;
   position: absolute;
   top: 0;
   left: 0
}
.lpn-form .lpn-element .text {
   overflow: hidden;
   padding-left: 50px;
   width: 100%
}
.lpn-form .lpn-element .switch-bg {
   position: absolute;
   top: -5px;
   right: 15px
}
.lpn-form .lpn-element .arrow-down {
   background: url() no-repeat;
   display: inline-block;
   width: 14px;
   height: 8px;
   -webkit-background-size: 14px 8px;
   background-size: 14px 8px;
   position: absolute;
   top: 7px;
   left: 25px
}

/* success.html(成功页) */
.success {
   position: relative;
   background-color: #FFFFFF;
   padding: 45px 0 0;
}
.success:after {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   bottom: 0;
   height: 1px;
   background-color: #CDCDCD;
   -webkit-transform: scale(1, .5);
   transform: scale(1, .5);
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
.success .tips-info {
   position: relative;
   margin: 0 18px;
   padding-bottom: 40px;
}
.success .tips-info:after {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   bottom: 0;
   height: 1px;
   background-color: #ECECEC;
   -webkit-transform: scale(1, .5);
   transform: scale(1, .5);
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
.success .tips-info .green-font {
   padding: 0 5px;
   color: #22AC38;
}
.success .add-area {
   overflow: hidden;
}
.success .add-area .map-link {
   padding: 29px 25px 32px 21px;
   float: right;
}
.success .add-area .map-icon-b {
   background: url("") no-repeat;
   width: 44px;
   height: 42px;
   -webkit-background-size: 44px 42px;
   background-size: 44px 42px;
   display: inline-block;
}
.success .add-area .add-info {
   overflow: hidden;
   border-right: 1px solid #F1F1F1;
   margin: 29px 0 32px 20px;
}
.success .add-area .add-info dt {
   font-size: 12px;
   color: #999999;
   padding-bottom: 12px;
}
.success .add-area .add-info dd {
   font-size: 16px;
}

/* map.html(导航页)
=======================*/
.map {
   background-color: #FFFFFF;
}
.map:after {
   display: none
}
.map .add-info {
   position: relative;
   padding: 18px;
   display: -moz-box;
   display: -webkit-box;
   display: -webkit-flex;
   display: -o-box;
   display: -ms-flexbox;
   display: flex;
   -moz-box-orient: horizontal;
   -webkit-box-orient: horizontal;
   -o-box-orient: horizontal;
   box-orient: horizontal;
   font-size: 16px;
}
.map .add-info:after {
   position: absolute;
   content: '';
   width: 100%;
   left: 0;
   bottom: 0;
   height: 1px;
   background-color: #CDCDCD;
   -webkit-transform: scale(1, .5);
   transform: scale(1, .5);
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
}
.map .add-info .add-floar {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   box-flex: 1;
   -ms-flex: 1;
   color: #999999;
}
.map .add-info .add-detail {
   -webkit-box-flex: 1;
   -webkit-flex: 1;
   box-flex: 1;
   -ms-flex: 1;
   color: #22AC38;
   text-align: right;
}
.map .map-link {
   margin: 30px 22px;
   display: block;
}
.map .map-link img {
   height: auto;
   height: 100%\9\0;
}

.weui-wepay-logo-default {
    font-size: 16px;
}
